<template>
  <div class="contentnei">
    <div class="leftContent">
      <div>任务管理</div>
      <div class="leftContenttop">
        <div class="peration">
          <t-tooltip placement="top" content="新增">
            <t-button @click="visibleCenter = !visibleCenter">
              <template #icon><PlusIcon /></template>
            </t-button>
          </t-tooltip>
          <t-tooltip placement="top" content="新增">
            <t-button theme="default">
              <template #icon><ListIcon /></template>
            </t-button>
          </t-tooltip>
          <t-tooltip placement="top" content="高级筛选">
            <t-button @click="visibleScreening = true" theme="default">
              <template #icon><FilterIcon /></template>
            </t-button>
          </t-tooltip>
          <t-select
            v-model="statustask"
            @change="statusChange"
            :options="statustaskoptions"
            style="width: 120px"
          >
          </t-select>
        </div>
        <div>
          <t-input
            v-model="taskname"
            @change="tasknameChange"
            placeholder="请输入任务名称"
            clearable
          >
            <template #suffixIcon>
              <search-icon :style="{ cursor: 'pointer' }" />
            </template>
          </t-input>
          <!-- icon-search -->
          <!-- <dk-input v-model="input" placeholder="请输入测试值" icon="icon-search"></dk-input> -->
        </div>
      </div>
      <div class="leftContentlist">
        <div
          :class="['listbox', { active: selectedTab === index }]"
          @mouseover="changeBackgroundColor($event)"
          @mouseleave="resetBackgroundColor($event)"
          @click="selectTab(index)"
          v-for="(item, index) in tasklist"
          :key="item.tasksname"
        >
          <div class="listboxtop">
            <div class="tasksname">{{ item.tasksname }}</div>
            <div class="tasksstatus">{{ item.tasksstatus }}</div>
          </div>
          <div class="listboxcontent">
            <div class="listboxcontenttop">
              <div class="listboxcontenttopleft">任务类型：</div>
              <div class="listboxcontenttopright">{{ item.taskleixing }}</div>
            </div>
            <div class="listboxcontenttop">
              <div class="listboxcontenttopleft">最后外呼时间：</div>
              <div class="listboxcontenttopright">
                {{ item.endcallouttime }}
              </div>
            </div>
          </div>
          <div class="listboxbottom">
            <div class="listboxbottomcar">
              <div>导入数</div>
              <div>{{ item.daoru }}</div>
            </div>
            <div class="listboxbottomcar">
              <div>待外呼数</div>
              <div>{{ item.daicallout }}</div>
            </div>
          </div>
          <div class="jindu" style="width: 100%">
            <t-progress :percentage="item.jindu" label />
          </div>
        </div>
      </div>
      <div class="pagination-container">
        <t-pagination
          :total="100"
          showJumper
          :totalContent="false"
          showPreviousAndNextBtn
          :showPageSize="false"
          :showPageNumber="false"
          theme="simple"
          style="width: 280px"
        />
      </div>
    </div>
    <div class="rightContent">
      <div class="rightContenttop">
        <div class="rightContenttopshang">
          <div class="namestatus">
            225673-激活沉默劳动者-
            <span>状态</span>
          </div>
          <div class="butstatus">
            <dk-button
              theme="primary"
              icon="icon-pen-edit"
              @click="visibleCenter = !visibleCenter"
              >编辑</dk-button
            >
            <dk-button type="grey">
              <icon-svg
                style="width: 18px; height: 18px"
                name="icon-file-copy"
              ></icon-svg>
              复制
            </dk-button>
            <dk-button type="grey">
              <icon-svg
                style="width: 18px; height: 18px"
                name="icon-pause-circle"
              ></icon-svg>
              暂停
            </dk-button>
            <dk-button
              type="grey"
              icon="icon-upload"
              @click="visibleImpNum = !visibleImpNum"
              >导入号码</dk-button
            >
            <!-- <icon-svg name="icon-lock"></icon-svg> -->
          </div>
        </div>
        <dk-divider style="margin: 10px 0"></dk-divider>
        <div class="rightContenttopxia">
          <span class="spandetailshead">话术模板：</span>
          <span class="spandetails">模版数据测试模版数据测试</span>
          <span class="spandetailshead">挂机短信模版：</span>
          <span class="spandetails">模版数据测试模版数据测试</span>
          <span class="spandetailshead">任务类型：</span>
          <span class="spandetails">模版数据测试模版数据测试</span>
          <span class="spandetailshead">外呼时间段：</span>
          <span class="spandetails">模版数据测试模版数据测试</span>
        </div>
      </div>
      <div class="tabsbox">
        <dk-tabs
          style="background-color: #fff"
          v-model="activeTab"
          placement="top"
          @change="handleTabChange"
        >
          <dk-tab-panel :value="1" label="未能外呼(0)">
            <p>开发中...</p>
          </dk-tab-panel>

          <dk-tab-panel :value="2" label="进行中外呼(0)">
            <callouting></callouting>
          </dk-tab-panel>

          <dk-tab-panel :value="3" label="已完成外呼(0)">
            <callouted></callouted>
          </dk-tab-panel>

          <dk-tab-panel :value="4" label="已拦截(0)">
            <p>开发中...</p>
          </dk-tab-panel>

          <dk-tab-panel
            style="background-color: #fff"
            :value="5"
            label="统计分析(0)"
          >
            <Analysis></Analysis>
          </dk-tab-panel>
        </dk-tabs>
      </div>
    </div>
  </div>
  <addEdit :isshow="visibleCenter" @event="clos"></addEdit>
  <screening
    :isshow="visibleScreening"
    @eventScreening="closScreening"
  ></screening>
  <importNumber
    :isshow="visibleImpNum"
    @eventImpNum="closImpNum"
  ></importNumber>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  PlusIcon,
  ListIcon,
  FilterIcon,
  SearchIcon,
} from "tdesign-icons-vue-next";
import { statustaskoptions } from "./formcolumn/index";
import addEdit from "./components/addEdit.vue";
import screening from "./components/screening.vue";
import importNumber from "./components/importNumber.vue";
import Analysis from "./components/Analysis.vue";
import callouting from "./components/callouting.vue";
import callouted from "./components/callouted.vue";
import { getlisttask } from "@/api/callOutTasks/index.js";
import { tasklist } from "./formcolumn/index";

const visibleCenter = ref(false);
const visibleScreening = ref(false);
const visibleImpNum = ref(false);
// 选项卡默认选项
const activeTab = ref(5);
const statustask = ref(0); // 任务状态
const taskname = ref(""); // 任务状态

// 当前选中的选项卡索引
const selectedTab = ref(null);

// 选中选项卡时调用的函数
const selectTab = (index) => {
  console.log(index);

  selectedTab.value = index;
};

const clos = (val) => {
  visibleCenter.value = val;
};
const closScreening = (val) => {
  console.log(val);
  visibleScreening.value = val;
};
// 导入手机号
const closImpNum = (val) => {
  console.log(val);
  visibleImpNum.value = val;
};
// 任务状态下拉框事件
const statusChange = (val) => {
  gettakaslist();
};
let timer = null;

const tasknameChange = (val) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    gettakaslist();
  }, 500);
};

const gettakaslist = async () => {
  // 获取任务列表
  const params = {
    project_id: 3, //项目ID
    page: 1, //页码
    count: 10, //每页数量
    task_id: "", //任务ID
    name: taskname.value, //任务名称
    app_id: "", //应用ID
    status: statustask.value, //任务状态
    start_time: "", //开始时间
    end_time: "", //结束时间
  };
  const res = await getlisttask(params);
  console.log(res);
};
const changeBackgroundColor = (event) => {
  // event.target.style.backgroundColor = "#3498db"; // 变为蓝色
  if (event.currentTarget === event.target) {
    event.currentTarget.style.backgroundColor = "#edf2fd"; 
  }
};
// 恢复背景颜色
const resetBackgroundColor = (event) => {
  if (event.currentTarget === event.target) {
    event.target.style.backgroundColor = "#ebeced"; 
  }
};
onMounted(() => {
  gettakaslist();
});
</script>

<style lang="scss" scoped>
.contentnei {
  height: 100%;
  position: relative;
  background-color: #ebeced !important;
  padding: 8px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 315px auto;
  column-gap: 8px;
  .leftContent {
    // position: relative;
    width: 100%;
    height: 100%;
    padding: 15px;
    grid-row: 1;
    background-color: white;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    .pag {
      width: 100%;
      // position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      padding: 0;
    }
    .leftContenttop {
      .peration {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
      }
    }

    .leftContentlist {
      margin-top: 8px;
      border-radius: 4px;
      overflow: scroll;
      // background-color: #a1a3a8;
      height: 65vh;
      width: 100%;
      font-weight: 400;
      font-size: 14px;
      .active {
          // background-color: #3498db !important; /* 激活状态的边框颜色 */
          // border: 1px solid #3498db !important;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
          border: 1px solid #1e75fe !important;
          background-color: #e9f1ff !important;
        }
      .listbox {
        background-color: #ebeced;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 8px;
        width: 100%;
        height: 200px;
        padding: 10px 10px;
        transition: background-color 0.3s ease-in-out;
        
        .listboxtop {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tasksname {
            width: 175px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
            font-size: 16px;
          }
          .tasksstatus {
            padding: 6px 14px;
            background-color: #e5eefd;
            border: 1px solid #458dff;
            border-radius: 4px;
            color: #1e75fe;
          }
        }
        .listboxcontent {
          padding: 10px 0;
          .listboxcontenttop {
            display: flex;
            align-items: center;
            height: 30px;
            .listboxcontenttopleft {
              width: 102px;
              text-align: right;
              color: #919192;
            }
            .listboxcontenttopright {
              color: #383838;
            }
          }
        }
        .listboxbottom {
          display: flex;
          justify-content: space-between;
          .listboxbottomcar {
            width: 48%;
            // text-align: right;
            color: #919192;
            // background-color: #ebeced;
            border-radius: 4px;
            :nth-child(2) {
              color: #458dff;
            }
          }
        }
        .jindu {
          width: 100%;
          margin-top: 18px;
        }
      }
      // .pagbox{
      //   width: 100%;
      // }
    }
    /* 隐藏滚动条 */
    .leftContentlist::-webkit-scrollbar {
      display: none;
    }

    /* Firefox 浏览器 */
    .leftContentlist {
      scrollbar-width: none;
    }

    /* IE 和 Edge 浏览器 */
    .leftContentlist {
      -ms-overflow-style: none;
    }
  }
  .rightContent {
    grid-row: 1;
    // grid-column: 2/12;
    background-color: #ebeced;
    font-size: 16px;
    font-weight: 600;
    overflow: scroll;
    .rightContenttop {
      background-color: #ffffff;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 8px;
      .rightContenttopshang {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 15px;
        .butstatus {
          display: flex;
          justify-content: space-between;
          width: 380px;
        }
      }
      .rightContenttopxia {
        // padding: 10px 0;
        .spandetailshead {
          font-size: 14px;
          color: #a1a3a8;
          font-weight: 400;
        }
        .spandetails {
          font-size: 14px;
          color: #5085ff;
          font-weight: 400;
          margin-right: 20px;
        }
      }
    }
    .tabsbox {
      background-color: #fff;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 8px;
    }
  }
}
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

:deep(.t-pagination__jump) {
  padding: 0 8px;
  margin: 0px;
  width: 165px;
  display: inline-flex !important;
  // flex: 1;
  background-color: #f3f3f3;
  text-align: center; /* 文字居中 */
}

:deep(.t-pagination) {
  padding: 0;
  justify-content: space-between;
}
:deep(.t-input-adornment__append) {
  height: 28px !important;
  right: -48px !important;
}
:deep(.t-input-adornment__text) {
  letter-spacing: 0px;
}
:deep(.t-input-adornment) {
  width: 68px !important;
}
</style>
